<template>
  <div>
    <!--搜索-->
    <div class="toolbar">
      <el-text class="mx-1">商品名称:&nbsp;</el-text>
      <el-input
        v-model="bidding.product_name"
        placeholder="请输入"
        style="width: 200px; margin-right: 10px"
      />
      <el-text class="mx-1">用户姓名:&nbsp;</el-text>
      <el-input
        v-model="bidding.user_name"
        placeholder="请输入"
        style="width: 200px; margin-right: 10px"
      />
      <el-text class="mx-1">排序:&nbsp;</el-text>
      <el-select
        v-model="bidding.sign"
        placeholder="请选择"
        style="width: 150px; margin-right: 20px"
      >
        <el-option label="价格" :value="0" />
        <el-option label="时间" :value="1" />
      </el-select>
      <el-button type="primary" @click="getBidding">查询</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <!-- 表格数据 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column
        v-if="showIdColumn"
        prop="id"
        label="编号"
        align="center"
      />
      <el-table-column prop="product_name" label="商品名称" align="center" />
      <el-table-column prop="price" label="价格" align="center" />
      <el-table-column prop="user_name" label="竞拍用户" align="center" />
      <el-table-column prop="times" label="已竞拍次数" align="center" />
      <el-table-column prop="create_time" label="竞拍开始时间" align="center" />
      <el-table-column prop="status" label="状态" align="center">
        <template #default="{ row }">
          <span v-if="row.status == 0">已成交</span>
          <span v-else-if="row.status == 1">未成交</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="操作" align="center">
        <template #default="row">
          <div class="mb-4">
            <el-button type="danger" plain @click="deleteBidd(row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div style="background-color: #fff">
      <el-pagination
        layout="prev, pager, next,sizes,total,jumper"
        :total="total"
        @current-change="chpage"
        @size-change="chsize"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import { getBiddings, delefeBidding } from "@/api/bidding/bidding.js";
const showIdColumn = ref(false); // 控制是否显示编号列
const tableData = ref([]);
let bidding = ref({
  page: 1,
  pageSize: 10,
  product_name: "",
  user_name: "",
  status: 2,
  price: 0,
  sign: 0
});
const total = ref(0); // 总记录数

/**
 * 获取竞拍信息列表
 */
async function getBidding() {
  let res = await getBiddings(bidding.value);
  if (res.code == 200) {
    tableData.value = res.data.list;
    bidding.value.page = res.data.page;
    bidding.value.pageSize = res.data.pageSize;
    total.value = res.data.total;
  }
}
/**
 * 删除竞拍信息
 * @param row
 */
async function deleteBidd(data) {
  let res = await delefeBidding(data.row.id);
  if (res.code == 200) {
    ElMessage.success("删除成功！");
    getBidding();
  } else {
    ElMessage.success("删除失败！");
  }
}

/**
 * 重置输入框内容
 */
function reset() {
  bidding.value = {
    page: 1,
    pageSize: 10,
    product_name: "",
    user_name: "",
    status: 2,
    price: 0
  };
  getBidding();
}

// 分页处理
function chpage(pg) {
  bidding.value.page = pg;
  getBidding();
}

function chsize(ps) {
  bidding.value.pageSize = ps;
  bidding.value.page = 1;
  getBidding();
}

// 初始化加载列表
onBeforeMount(() => {
  getBidding();
});
</script>

<style scoped></style>
